<template>
    <div class="parameter">
        <div class="newAddBut">
            <el-button type="primary" @click="AddParameters">新增参数</el-button>
        </div>
        <el-input
                v-model="search.name"
                size="small"
                class="search"
                placeholder="输入参数名称搜索"
                @change="select"/>
        <TableComponent
                :cols="cols"
                :table-data="tableData"
                :total="total"
                @requestData="requestData">
            <template  slot="operating" slot-scope="scope">
                    <el-button  @click="change(scope.data)">修改</el-button>
                    <el-button type="danger"  @click="del(scope.data.data.id)">删除</el-button>
            </template>
        </TableComponent>

        <el-dialog title="参数编辑" width="920px" :before-close="close" class="dialog dialogAdd"
                   custom-class="custom-dialog"
                   :visible.sync="dialogEditVisible" :close-on-click-modal='false'>
            <el-form ref="editForm" style="margin-right: 20px;"
                     :model="editForm" :inline="true"
                     label-position="right"
                     label-width="110px" size="mini"
                     :rules="rule">
                <el-form-item label="参数ID" prop="khxm">
                    <el-input v-model="editForm.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="参数名称" prop="name">
                    <el-input v-model="editForm.name" :disabled="!isEdit"></el-input>
                </el-form-item>
                <el-form-item label="参数类型" prop="type">
                    <el-input v-model="editForm.type" :disabled="!isEdit"></el-input>
                </el-form-item>
                <el-form-item label="参数说明" prop="desc">
                    <el-input v-model="editForm.desc" :disabled="!isEdit"></el-input>
                </el-form-item>
                <el-form-item label="参数值" prop="remark">
                    <el-input v-model="editForm.value" :disabled="!isEdit"></el-input>
                </el-form-item>
                <el-form-item label="更新时间" prop="createTime">
                    <el-input v-model="editForm.updateTime" :disabled="true"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer" v-if="editForm.state != 3">
                <el-button v-if="!isEdit" @click="formEdit" size="mini">编 辑</el-button>
                <el-button v-else @click="cancelEdit" size="mini">取消编辑</el-button>
                <el-button type="primary" @click="saveEdit('editForm')" size="mini">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import TableComponent from "../../components/basic/TableComponent";
    import {parameterGetALl, parameterPost, parameterAdd, parameterDel} from '../../http/admin'

    export default {
        name: "ParameterAdmin",
        components: {
            TableComponent,
        },
        data() {
            return {
                cols: {
                    id: "参数ID",
                    name: "参数名称",
                    type: "参数类型",
                    value: "参数值",
                    desc: "参数说明",
                    updateTime: "更新时间",
                },
                tableData: [],
                total: 0,
                dialogEditVisible: false,
                editForm: {},
                isEdit: false,
                editFormClone: {},
                index: '',
                rule: {
                    name: [
                        {required: true, message: '请输入参数名称', trigger: 'blur'},
                        {min: 2, max: 6, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请输入参数类型', trigger: 'blur'},
                        {max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    value: [
                        {required: true, message: '请输入参数名称', trigger: 'blur'},
                    ],
                    desc: [
                        {required: true, message: '请输入参数说明', trigger: 'blur'},
                    ],
                },
                search: {
                    name: ''
                },
                page:'',
                limit:'',
            }
        },
        methods: {
            requestData(page, limit) {
                this.page = page;
                this.limit = limit;
                parameterGetALl(page, limit, this.search)
                    .then(res => {
                        if (res.data.code === 20000) {
                            this.total = res.data.data.total;
                            this.tableData = res.data.data.info;
                        } else {
                            this.$message.error(res.data.message);
                        }
                    }).catch(err => {
                    console.error(err)
                    this.$message.error("数据加载失败！");
                })
            },
            change(scope) {
                this.dialogEditVisible = true;
                this.editForm = scope.data
                this.editFormClone = this._.cloneDeep(scope.data);
                this.index = scope.index
            },
            getData() {
                parameterGetALl(this.page, this.limit, this.search)
                    .then(res => {
                        if (res.data.code === 20000) {
                            this.total = res.data.data.total;
                            this.tableData = res.data.data.info;
                            if (this.tableData.length==0 && this.page >0) {
                                this.page -= 1;
                                this.getData();
                            }
                        } else {
                            this.$message.error(res.data.message);
                        }
                    }).catch(err => {
                    console.error(err)
                    this.$message.error("数据加载失败！");
                })
            },
            del(id) {
                this.$confirm('是否确认删除', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    parameterDel(id)
                        .then(() => {
                            this.getData();
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });

                        }).catch(err => {
                        console.log('删除错误', err)
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
            close(done) {
                if (this.isEdit) {
                    this.$confirm('内容未保存，是否退出', '提示', {
                        confirmButtonText: '是',
                        cancelButtonText: '否',
                        type: 'warning'
                    }).then(() => {
                        if (this.index > -1) {
                            this.$message({
                                type: 'info',
                                message: '已取消编辑'
                            });
                            this.tableData.splice(this.index, 1, this.editFormClone)
                            this.isEdit = false;
                            this.dialogEditVisible = false
                            return done()
                        } else {
                            this.$message({
                                type: 'info',
                                message: '已取消新增'
                            });
                            this.isEdit = false;
                            this.dialogEditVisible = false
                            return done()
                        }

                    }).catch((err) => {
                        console.log('错误', err)
                        this.$message({
                            type: 'success',
                            message: (this.index > -1) ? '请继续编辑' : '请继续新增'
                        });
                        return done(false)
                    });
                } else {
                    this.dialogEditVisible = false
                }
            },
            formEdit() {
                this.isEdit = true;
            },
            cancelEdit() {
                this.isEdit = false;
                this.editForm = this._.cloneDeep(this.editFormClone);
            },
            saveEdit(editForm) {
              console.log(this.index,-1,this.index>-1);
                if (this.index > -1) {
                    this.$refs[editForm].validate((valid, err) => {
                        if (valid) {
                            parameterPost(this.editForm)
                                .then(result => {
                                    if (result.data.code == 20000) {
                                        this.isEdit = false;
                                        this.dialogEditVisible = false;
                                        this.$message({
                                            message: '修改成功',
                                            type: 'success'
                                        });
                                    } else {
                                        this.$message.error(result.data.message);
                                    }
                                }).catch(err => {
                                console.log('错误', err)
                            })
                        } else {
                            console.log(err)
                            this.$message.error('请完善表单内容');
                        }
                    })
                } else {
                    this.$refs[editForm].validate((valid, err) => {
                        if (valid) {
                            parameterAdd(this.editForm)
                                .then(result => {
                                    console.log('上传数据', this.editForm)
                                    if (result.data.code == 20000) {
                                        this.isEdit = false;
                                        this.dialogEditVisible = false;
                                        this.$message({
                                            message: '新增成功',
                                            type: 'success'
                                        });
                                        this.getData();
                                    } else {
                                        this.$message.error(result.data.message);
                                    }
                                }).catch(err => {
                                console.log('错误', err)
                            })
                        } else {
                            console.log(err)
                            this.$message.error('请完善表单内容');
                        }
                    })
                }

            },
            select() {
                parameterGetALl(this.page, this.limit, this.search)
                    .then(res => {
                        if (res.data.code === 20000) {
                            this.total = res.data.data.total;
                            this.tableData = res.data.data.info;
                        } else {
                            this.$message.error(res.data.message);
                            console.log('查询失败', res.data)
                        }

                    }).catch(err => {
                    console.error('查询请求失败', err)
                    this.$message.error("数据加载失败！详情见日志");
                })
            },
            AddParameters() {
                this.index = -1;
                this.dialogEditVisible = true;
                this.editForm = {}
            },
        },
        beforeMount() {
            this.requestData(1, 5);
        },


    }
</script>

<style scoped lang="less">
    .search {
        width: 300px;
        margin: 30px 0;
    }

    .parameter {
        margin: 0 30px;
    }
    .newAddBut{
        float: right;
        margin:30px 100px;
    }

</style>